import React, { useState } from "react";
import { CardWeather } from "../Card/Card";
import { toDate } from "../../../data/helpers";
import { weatherImg } from "../../../data/data";
import s from "./Slider.module.scss";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";

const Slider = ({ data }) => {
  const [currentSlide, setCurrentSlide] = useState(0);

  const nextSlide = () => {
    setCurrentSlide(currentSlide === data.length - 1 ? 0 : currentSlide + 1);
  };

  const prevSlide = () => {
    setCurrentSlide(currentSlide === 0 ? data.length - 1 : currentSlide - 1);
  };

  return (
    <div className={s.slider}>
      <div
        className={s.slider__slides}
        style={{ transform: `translateX(-${currentSlide * 100}%)` }}
      >
        {data.map((elem, index) => (
          <CardWeather
            key={index}
            date={toDate(elem.dt_txt)}
            weather={elem.weather[0].description}
            temp={elem.main.temp}
            feeltemp={elem.main.feels_like}
            image={weatherImg[elem.weather[0].main.toLowerCase()]}
            className={`slide ${index === currentSlide ? "active" : ""}`}
          />
        ))}
      </div>
      <div style={{ marginTop: 30 }}>
        <button onClick={prevSlide} style={{ marginRight: 30 }}>
          <ArrowBackIosIcon />
        </button>
        <button onClick={nextSlide}>
          <ArrowForwardIosIcon />
        </button>
      </div>
    </div>
  );
};

export default Slider;
